<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="__CBTCSS__/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>

<body>

{include file="index/header" /}





<div class="container my-5">
<div class="row">

  <div class="col-xs-12 col-md-2">
  <div class="row">
    <div class="list-group w-100 border shadow-sm rounded" id="accordionExample">
    {volist name="group" id="value"}
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary" id="heading_{$value.id}"
      data-toggle="collapse" data-target="#collapse_{$value.id}" aria-expanded="true" aria-controls="collapse_{$value.id}">
        {$value.name}<span class="badge badge-light float-right mt-1">{$value.ct}</span>
      </a>
      {present name="$value.zclass"}
      <div id="collapse_{$value.id}" class="collapse {if $_type==$value.id}show{/if}" aria-labelledby="heading_{$value.id}" data-parent="#accordionExample">
      {volist name="$value.zclass" id="vol"}
        <a href="{:url('/article/article_column/groupId/'.$vol['id'])}"
        class="list-group-item list-group-item-action list-group-item-info {if $Request.param.groupId==$vol['id']}active disabled{/if}">
          {$vol.name}<span class="badge float-right {if $Request.param.groupId==$vol['id']}badge-light{else /}badge-light{/if}">{$vol.ct}</span>
        </a>
      {/volist}
      </div>
      {/present}
    {/volist}
    </div>
  </div>
  </div>

  <div class="col-xs-12 col-md-10">
    {empty name="article"}
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
      <strong>暂无文章哦~</strong>
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    {/empty}


    <style>
    .tov { overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
    @media (max-width: 575.98px) {
    .ev_alk { width:256px;text-align:left; }
    .ev_des { display:none; }
    .v_pre  { width:42px; text-align:center; }
    .v_alk  { width:356px;text-align:left; }
    .v_des  { display:none; }
    }
    @media (min-width: 1200px) {
    .ev_alk { width:450px;text-align:left; }
    /*.ev_des { width:312px;text-align:left; }*/
    .v_pre  { width:54px; text-align:center; }
    .v_nck  { width:120px; text-align:center; }
    .v_alk  { max-width:496px;text-align:left; }
    /*.v_des  { width:340px;text-align:left; }*/
    }
    </style>
    <ul class="list-group">
      {volist name="article" id="vol" key="k"}
      <li class="list-group-item p-1" id="liarti_{$vol.id}">
        <div class="btn-group" role="group">
          <button type="button" class="align-middle border btn btn-success btn-sm tov v_pre">转载</button>
          <a href="/{$vol.aid}" target="_blank" class="align-middle border btn btn-outline-dark btn-sm tov v_alk"
          data-toggle="popover" data-trigger="hover" data-placement="top" data-content="{$vol.description}">
            {$vol.title}
          </a>
        </div>
        <div class="btn-group float-right my_list_btn" role="group" aria-label="Button group with nested dropdown">
          <button class="btn btn-outline-secondary btn-sm" >{$vol.update_time|date='Y-m-d H:i'}</button>
          <a href="/{$vol.aid}" target="_blank" class="btn btn-outline-info btn-sm px-1 tov v_nck" data-toggle="tooltip" title="作者：{$unick[$vol['uid']]}">
            <img src="/static/icons/person.svg"> {$unick[$vol['uid']]}
          </a>
          <a href="/{$vol.aid}" target="_blank" class="btn btn-outline-secondary btn-sm px-1 tov v_pre" data-toggle="tooltip" title="查看：{$vol.browse|floor}">
            <img src="/static/icons/eye.svg"> {$vol.browse|floor}
          </a>
          <a href="/{$vol.aid}" target="_blank" class="btn btn-outline-success btn-sm px-1 tov v_pre" data-toggle="tooltip" title="评论：{$vol.comment|floor}">
            <img src="/static/icons/chat.svg"> {$vol.comment|floor}
          </a>
        </div>
      </li>
      {/volist}
    </ul>
  </div>
</div>
</div>







{include file="index/footer" /}
</body>
<script>
function viewsize(){
  var win = $(window).width(),
      main = $('.my_list_btn');
  if(win < 576)
      main.addClass('w-100 mt-1');
  if(win >= 576)
      main.removeClass('w-100 mt-1');
}
window.onresize = viewsize;

$(function () {
  $('[data-toggle="popover"]').popover();
  viewsize();
})
</script>

</html>